<script setup>
import BasicInfo from '@/views/xmgl/components/BasicInfo.vue';
import Architecture from '@/views/xmgl/components/Architecture.vue';
import CfInfo from '@/views/xmgl/components/CfInfo.vue';
const activeName = ref('basicInfo');
const appContainer = ref(null);
const boxHeight = ref(null);
onMounted(() => {
  boxHeight.value = appContainer.value.clientHeight;
});
</script>
<template>
  <div class="app-container info-wrapper" ref="appContainer">
    <el-tabs v-model="activeName" class="u-base-fg u-mb20">
      <el-tab-pane label="基础信息" name="basicInfo" lazy></el-tab-pane>
      <el-tab-pane label="托管单位架构" name="architecture" lazy></el-tab-pane>
      <el-tab-pane label="收资信息" name="cfInfo" lazy></el-tab-pane>
    </el-tabs>
    <BasicInfo v-if="activeName === 'basicInfo'" :boxHeight="boxHeight" />
    <Architecture v-if="activeName === 'architecture'" />
    <CfInfo v-if="activeName === 'cfInfo'" />
  </div>
</template>
<style lang="scss" scoped>
@import url(./css/index.scss);
.info-wrapper {
  padding-top: 5px;
  overflow-y: auto;
}

::v-deep .el-tabs {
  &.el-tabs--top {
    .el-tabs__header {
      margin: 0;
      // border-bottom-width: 20px;
      // border-bottom-style: solid;
    }
    .el-tabs__item.is-top:nth-child(2) {
      padding-left: 20px;
    }
  }
}
</style>
